<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 案例：父子组件双向通信（watch实现）</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">
        <!-- 调用组件 -->
        <v-note :title='title' :messages='messages'></v-note>
        <v-comp :number1='num1' :number2='num2' @num1change='num1Change' @num2change='num2Change'></v-comp>
    </div>

    <!-- 组件模板 -->
    <template id='comp'>
        <div>
            <div>
                <h2>父组件传递的值: {{number1}}</h2>
                <h2>子组件内部的值: {{dnumber1}}</h2>
                输入框-1：<input type="number" v-model='dnumber1'>
            </div>
            <div>
                <h2>父组件传递的值: {{number2}}</h2>
                <h2>子组件内部的值: {{dnumber2}}</h2>
                输入框-2：<input type="number" v-model='dnumber2'>
            </div>
        </div>
    </template>

    <!-- 组件模板 -->
    <template id='note'>
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-html="msg" v-for='msg in messages'></li>
            </ul>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        const vComp = {
            template: '#comp',
            props: {
                number1: Number,
                number2: Number
            },
            data() {
                return {
                    dnumber1: this.number1,
                    dnumber2: this.number2
                }
            },
            watch: {
                dnumber1(newVal, oldVal) {
                    this.dnumber2 = newVal * 100;
                    this.$emit('num1change', parseFloat(newVal));
                    // console.log('dnumber1：' + newVal, oldVal);
                },
                dnumber2(newVal, oldVal) {
                    this.dnumber1 = newVal / 100;
                    this.$emit('num2change', parseFloat(newVal));
                    // console.log('dnumber2：' + newVal, oldVal);
                }
            }
        }

        // 笔记列表组件
        const vNote = {
            template: '#note',
            props: {
                title: String,
                messages: {
                    type: Array,
                    default () {
                        return [];
                    }
                }
            },
        }

        const app = new Vue({
            el: '#app',
            data: {
                title: '案例：父子组件双向通信（watch实现）',
                messages: [
                    `通过子组件内部添加 watch 属性来监听内部变量的变化，再将变化后的值通过 $emit 事件传递给父组件`,
                ],
                num1: 0,
                num2: 0,
            },
            components: {
                vNote,
                vComp
            },
            computed: {},
            methods: {
                num1Change(value) {
                    this.num1 = value;
                    console.log('父组件 num1：',value);
                },
                num2Change(value) {
                    this.num2 = value;
                    console.log('父组件 num2：',value);
                }
            }
        });
    </script>
</body>

</html>